<template>
  <div class="newsItems">
    <!-- <h3 style="margin-left: 20px;text-align: left">新闻</h3> -->
    <!-- <hr> -->
    <!-- 新闻 -->
    <!-- <div class="lunbotu2">
      <el-carousel height="150px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>

    </div> -->
    <div class="demo-image" style="border: 1px solid #F00; float: left">
      <!-- <div class="block" v-for="fit in fits" :key="fit"> -->
        <!-- <span class="demonstration">{{ fit }}</span> -->
        <el-image
          style="width: 300px; height: 150px "
          :src=src
          :fit="fill"></el-image>
      <!-- </div> -->
    </div>
    <div class="newsItems2" style="border: 1px solid #F00; float: left;width: 400px; height: 154px">
      <h4 style="text-align: left;margin-left: 12px;margin-top:5px">{{data.title}}&nbsp;&nbsp;
        <router-link :to="{name:'news',query:{nClass:data.title}}"  style="text-decoration:none;"><span>|&nbsp;更多</span></router-link>
      </h4>
<!--      <div v-for="(o,index) in news" :key="index">-->
<!--        <img src="@/assets/img/arrow.gif" width="15" height="11" style="margin-bottom:3px;">-->
<!--        <el-link type="info" :underline="false" style="margin-bottom:10px;">-->
<!--          <router-link :to="{name:'newsDetail',query:{nId:o.nId,nClass:o.nClass}}"  style="text-decoration: none;color: black;font-size:12px;font-family:'黑体';">[{{o.nDate}}] {{o.nTitle}}</router-link>-->
<!--        </el-link>-->
<!--      </div>-->

      <div style="text-align:left">
        <div v-for="(o,index) in news" :key="index" style="margin: 0px 10px 0px 10px">
          <img src="@/assets/img/arrow.gif" width="15" height="11" style="margin-bottom:3px;">
          <el-link type="info" :underline="false" style="margin-bottom:10px;">
            <router-link :to="{name:'newsDetail',query:{nId:o.nId,nClass:o.nClass,content:o.content,title:o.title,author:o.author,date:o.createAt}}"  style="" :class="classValue(o.isMain)">[{{o.createAt}}] {{o.title}}</router-link>
          </el-link>
        </div>
      </div>
<!--      <div style="margin-top:90px;margin-left:290px">-->
<!--        <img class="click" src="@/assets/img/pic050.gif" alt="" />-->
<!--        <span><a href="/#/news">更多...</a></span>-->
<!--      </div>-->
    </div>
  </div>

</template>
<script>
export default {
  name: "NewsItems",
  props:['data'],
  data() {
    return {
      // tmp:[{nDate:"2022",title:"hhhhh",isMain:1},{nDate:"2022",title:"hhhhh",isMain:0},{nDate:"2022",title:"hhhhh",isMain:0}],
      //lunbotu2数据
      // List: [{nPic: ""}],
      // news: [],
      // notice: [],
      // information: []
      //图片加载地址
      src:"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      news:[]

    }
  },
  //动态修改class
  computed: {
    classValue() {
      return function (i){
        return 'class-' + i
      };
    }
  },
  methods:{
          getAll(){
            this.$axios.get("/article/article/articleListex?curpage=1&pagesize=5&module="+this.data.type).then((res)=>{
              this.news=res.data.data.records;
            });
      console.log("news!!!===")
      console.log(this.news)
        },
      getPic(){
        let url=this.$axios.defaults.baseURL;
        this.$axios.get("/article/article/Toparticle?module="+this.data.type).then((res)=>{
          this.src=url+"/article/article/download/"+res.data.data.pic+"?filePath=articles&fileName="+ res.data.data.pic;
          // console.log("src!!!")
          // console.log(this.src)
          // console.log(res.data.data.pic)
          });
      }
  },
  created(){
    this.getAll()
    this.getPic()

  }
}
</script>
<style>
/* .lunbotu2 {
  width: 300px;
  float: left;
  margin-left: 0px;
} */
.message{
  /*width: 290px;*/
  /*height: 210px;*/
  /* margin: 0 15px; */
  /*float: left;*/
  /*text-align: left;*/
  /* position:relative; */
}
/* .message news-item{
  float: right;
} */
.click{
  /* margin-left:290px, */
}
.newsItems2 span{
  font-size: 12px;
  color: #2171e8
}
.class-1{
  text-decoration: none;
  font-size: 15px;
  color: deepskyblue;
}
.class-0{
  text-decoration: none;color: black;font-size:12px;font-family:'黑体';
}
</style>
